<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审计系统 - 项目列表</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

    <style>
        /* 说明区域的样式 */
        .instructions {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.5;
            display: none; /* 默认隐藏 */
            transition: all 0.3s ease; /* 添加过渡效果 */
        }

        /* 按钮样式 */
        .toggle-btn {
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .toggle-btn:hover {
            background-color: #357abd;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="container-title">建设项目内部审计——内部控制调查系统</h1>

                <!-- 使用说明区域 -->
        <button class="toggle-btn" onclick="toggleInstructions()">展开使用说明</button>
        <div class="instructions" id="instructions">
            <h2>使用说明</h2>
            <p>1. <strong>创建新项目</strong>：点击"创建新项目"按钮，填写项目信息后提交。</p>
            <p>2. <strong>上传规范性文件</strong>：即审计的依据，如《建设工程质量管理条例》、《质量验收标准》、《建设工程项目管理规范》、《企业内部控制手册》等。</p>
            <p>3. <strong>上传项目资料底稿</strong>：即审计的证据，如《施工合同》、《内部审批流程》、《进度管理记录》、《会议记录》、《审计发现的问题》等在审计过程中与项目相关资料。</p>
            <p>4. <strong>生成内部控制测试报告</strong>：AI会根据已上传审计依据，自动审查现有的审计证据，按现有已上传的证据自动生成《内部控制测试报告》。</p>
            <p>5. <strong>删除项目</strong>：在项目列表中选择项目，点击"删除项目"按钮，确认后将删除该项目及其相关资料。</p>
        </div>
        <div class="card">
            <h2 class="project-title">项目列表</h2>
            <div class="button-group">
                <a href="{{ url_for('create_project_form') }}" class="btn">创建新项目</a>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>状态</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for project in projects %}
                    <tr>
                        <td>{{ project.id }}</td>
                        <td>{{ project.name }}</td>
                        <td>{{ project.status }}</td>
                        <td>{{ project.start_date }}</td>
                        <td>{{ project.end_date }}</td>
                        <td>
                            <a href="{{ url_for('upload_normative_document_form', project_id=project.id) }}" class="btn btn-sm btn-upload">上传规范性文件</a>
                            <a href="{{ url_for('project_documents', project_id=project.id) }}" class="btn btn-sm">上传项目资料底稿</a>
                            <a href="{{ url_for('project_internal_controls', project_id=project.id) }}" class="btn btn-sm btn-control">生成内部控制测试报告</a>
                            <!-- 添加删除按钮 -->
                            <a href="{{ url_for('delete_project', project_id=project.id) }}" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除这个项目吗？')">删除项目</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // 控制说明区域的显示和隐藏
        function toggleInstructions() {
            const instructions = document.getElementById('instructions');
            const toggleBtn = document.querySelector('.toggle-btn');
            
            if (instructions.style.display === 'none' || instructions.style.display === '') {
                instructions.style.display = 'block';
                toggleBtn.textContent = '隐藏使用说明';
            } else {
                instructions.style.display = 'none';
                toggleBtn.textContent = '展开使用说明';
            }
        }
    </script>

</body>
</html>